<template>
  <!--    审计成果几整改效益总览-->
  <div class="body-overview">
    <div class="overview-title">
      <span class="title-left">审计成果及整改效益总览</span>
      <span class="title-right">
        <span class="right-year">年份:</span>
        <el-select
          class="right-select"
          :disabled="loading"
          v-model="yearValue"
          popper-class="select-option"
          :teleported="false"
          @change="yearChange"
        >
          <el-option v-for="item in yearList" :key="item" :label="item" :value="item" />
        </el-select>
      </span>
    </div>
    <div class="overview-body">
      <div class="body-item">
        <div class="item-figure">{{ benefitOverview.numberOfRectifiedItems }}</div>
        <div class="item-title">已整改项目数/项目总数(个)</div>
      </div>
      <div class="body-item">
        <div class="item-figure">{{ benefitOverview.numberOfRectifiedProblems }}</div>
        <div class="item-title">已整改问题个数/审计问题发现数(个)</div>
      </div>
      <div class="body-item">
        <div class="item-figure">{{ benefitOverview.perfectSystem }}</div>
        <div class="item-title">完善制度、流程及系统(个)</div>
      </div>
      <div class="body-item">
        <div class="item-figure">{{ benefitOverview.enhancedExecution }}</div>
        <div class="item-title">纠错或强化执行(个)</div>
      </div>
      <div class="body-item">
        <div class="item-figure">{{ benefitOverview.amountLostAndWasted }}</div>
        <div class="item-title">损失浪费金额(万元)</div>
      </div>
      <div class="body-item">
        <div class="item-figure">{{ benefitOverview.amountAtRisk }}</div>
        <div class="item-title">风险金额(万元)</div>
      </div>
      <div class="body-item">
        <div class="item-figure">{{ benefitOverview.recoveryAmount }}</div>
        <div class="item-title">挽回损失金额(万元)</div>
      </div>
      <div class="body-item">
        <div class="item-figure">{{ benefitOverview.hedgeAmount }}</div>
        <div class="item-title">规避风险金额(万元)</div>
      </div>
    </div>
  </div>
  <!--    审计发现问题情况与发现整改情况-->
  <div class="body-findTheRectification">
    <div class="findTheRectification-title">审计发现问题情况与发现整改情况</div>
    <div class="findTheRectification-body">
      <vxe-table
        height="100%"
        :data="tableData"
        align="center"
        class="body-scrollbar"
        :scroll-y="{ enabled: true }"
        @cell-click="cellClickEvent"
      >
        <vxe-colgroup>
          <vxe-column field="projectName" title="项目名称" width="14%"></vxe-column>
          <vxe-column field="projectChiefAuditor" title="项目主审" width="6.7%"></vxe-column>
          <vxe-column field="state" title="状态" width="8.4%"></vxe-column>
          <vxe-column field="numberOfQuestions" title="问题个数" width="8.4%"></vxe-column>
          <vxe-column field="numberOfRectifiedProblems" title="已整改问题个数" width="11.7%"></vxe-column>
        </vxe-colgroup>
        <vxe-colgroup title="审计发现涉及金额(万元)">
          <vxe-column field="aggregate" title="总计" width="6.7%"></vxe-column>
          <vxe-column field="illegalAmount" title="违规金额" width="6.7%"></vxe-column>
          <vxe-column field="directLossesWasteMoney" title="直接损失浪费金额" width="6.7%"></vxe-column>
          <vxe-column field="manageIrregularAmounts" title="管理不规范金额" width="7.8%"></vxe-column>
          <vxe-column field="mishandlingOfSums" title="会计信息处理不当金额" width="18.4%"></vxe-column>
          <vxe-column field="theAmountAtRiskOfLoss" title="可能造成损失的风险金额" width="8.4%"></vxe-column>
          <vxe-column field="personalEconomicProblem" title="个人经济问题" width="6.7%"></vxe-column>
        </vxe-colgroup>
        <vxe-colgroup title="整改取得经济效益(万元)">
          <vxe-column field="increaseIncome" title="增加收入" show-overflow width="6.7%"></vxe-column>
          <vxe-column field="costSaving" title="节约成本（投资）" show-overflow width="6.7%"></vxe-column>
          <vxe-column field="recoverDamage" title="挽回损失" show-overflow width="6.7%"></vxe-column>
          <vxe-column field="avoidRisk" title="规避风险" show-overflow width="6.7%"></vxe-column>
        </vxe-colgroup>
        <vxe-colgroup title="审计成果利用(个)">
          <vxe-column field="perfectSystem" title="完善制度" show-overflow width="6.7%"></vxe-column>
          <vxe-column field="improveFlowScheme" title="改进流程" show-overflow width="6.7%"></vxe-column>
          <vxe-column field="itSystemTransformation" title="IT系统改造" show-overflow width="7.8%"></vxe-column>
          <vxe-column field="correctErrorsOrEnforceExecution" title="纠正错误或强化执行" show-overflow width="7.8%"></vxe-column>
        </vxe-colgroup>
      </vxe-table>
    </div>
  </div>
  <!--    审计评价展示-->
  <div
    class="body-evaluationDisplay"
    v-loading="loading"
    element-loading-background="rgba(122, 122, 122, 0.8)"
    element-loading-text="加载中..."
  >
    <div class="evaluationDisplay-title">
      <span class="title-left">审计评价展示</span>
      <span class="title-right">
        <span class="right-year">项目名称选择:</span>
        <el-select
          class="right-select"
          v-model="companySelectionValue"
          popper-class="select-option"
          :teleported="false"
          @change="projectNameChange"
        >
          <el-option v-for="item in companySelection" :key="item.name" :label="item.name" :value="item.name" />
        </el-select>
      </span>
    </div>
    <div class="evaluationDisplay-body">
      <div class="body-chart">
        <!--          经营管理绩效评价-->
        <div class="chart-performanceEvaluation">
          <div class="chart-title">
            <span class="icon"></span>
            <span>经营管理绩效评价</span>
          </div>
          <div class="chart-body">
            <div class="performanceEvaluation-tooltip">
              <!--             市场经营悬浮窗-->
              <div v-if="bazaar" :style="{ left: tooltipLeft, top: tooltipTop }" class="tooltip-base tooltip-bazaar">
                <div v-for="item in marketOperationData" :key="item.name" class="base-list">
                  <div class="year-title">
                    <span class="title-icon" :style="{ background: item.color }"></span>{{ item.name }}
                  </div>
                  <div class="list-content">
                    <div class="content-bearThePalm">排名：{{ item.ranking }}</div>
                  </div>
                </div>
              </div>
              <!--              政企运营悬浮窗-->
              <div
                v-if="governmentEnterprise"
                :style="{ left: tooltipLeft, top: tooltipTop }"
                class="tooltip-base tooltip-governmentEnterprise"
              >
                <div v-for="item in governmentEnterpriseData" :key="item.name" class="base-list">
                  <div class="year-title">
                    <span class="title-icon" :style="{ background: item.color }"></span>{{ item.name }}
                  </div>
                  <div class="list-content">
                    <div class="content-bearThePalm">获奖情况：{{ item.bearThePalm }}</div>
                  </div>
                </div>
              </div>
              <!--              网建运维悬浮窗-->
              <div
                v-if="netConstruction"
                :style="{ left: tooltipLeft, top: tooltipTop }"
                class="tooltip-base tooltip-netConstruction"
              >
                <div v-for="item in networkConstructionOperationData" :key="item.name" class="base-list">
                  <div class="year-title">
                    <span class="title-icon" :style="{ background: item.color }"></span>{{ item.name }}
                  </div>
                  <div class="list-content">
                    <div class="content-bearThePalm">网络运维获奖情况：{{ item.networkManagementSituation }}</div>
                    <div class="content-bearThePalm">工程建设获奖情况：{{ item.engineeringManagementSituation }}</div>
                  </div>
                </div>
              </div>
              <!--              综合管理悬浮窗-->
              <div v-if="synthesize" :style="{ left: tooltipLeft, top: tooltipTop }" class="tooltip-base tooltip-synthesize">
                <div v-for="item in integratedManagementData" :key="item.name" class="base-list">
                  <div class="year-title">
                    <span class="title-icon" :style="{ background: item.color }"></span>{{ item.name }}
                  </div>
                  <div class="list-content">
                    <div class="content-bearThePalm">财务工作考评：{{ item.financialWorkEvaluation }}</div>
                    <div class="content-bearThePalm">安全生产责任制考核：{{ item.satisfiesafetyProductionAssessment }}</div>
                    <div class="content-bearThePalm">工会建家考评：{{ item.evaluationOfUnionBuilding }}</div>
                    <div class="content-bearThePalm">供应链绩效考评：{{ item.supplyChainPerformanceEvaluation }}</div>
                  </div>
                </div>
              </div>
              <!--             党建引领悬浮窗-->
              <div
                v-if="partyBuilding"
                :style="{ left: tooltipLeft, top: tooltipTop }"
                class="tooltip-base tooltip-partyBuilding"
              >
                <div v-for="item in guidanceInPartyBuildingData" :key="item.name" class="base-list">
                  <div class="year-title">
                    <span class="title-icon" :style="{ background: item.color }"></span>{{ item.name }}
                  </div>
                  <div class="list-content">
                    <div class="content-bearThePalm">纪律检查工作考核评价：{{ item.disciplineAssessment }}</div>
                    <div class="content-bearThePalm">党建工作考核评价：{{ item.partyBuildingAssessment }}</div>
                  </div>
                </div>
              </div>
            </div>
            <div id="performanceEvaluation"></div>
          </div>
        </div>
        <!--          问卷调查结果-->
        <div class="chart-questionnaireSurvey">
          <div class="chart-title">
            <span class="icon"></span>
            <span>问卷调查结果</span>
          </div>
          <div class="chart-body">
            <div class="body-left">
              <div id="scoreResult"></div>
              <div class="item-title">调查问卷项得分结果</div>
            </div>
            <div class="body-right">
              <div id="roomForImprovement"></div>
              <div class="item-title">有待提升的方面</div>
            </div>
          </div>
        </div>
      </div>
      <!--          审计发现问题分布图-->
      <div class="body-problemProfile">
        <div class="chart-title">
          <span class="icon"></span>
          <span>审计发现问题分布图</span>
        </div>
        <div class="chart-body">
          <div class="body-left">
            <div class="item-title">七大审计内容</div>
            <div id="problemProfile"></div>
          </div>
          <div class="body-right">
            <div class="item-title">业务条线</div>
            <div id="serviceLine"></div>
          </div>
        </div>
      </div>
      <!--          任期内指标完成情况-->
      <div class="body-performance">
        <div class="chart-title">
          <span class="icon"></span>
          <span>任期内指标完成情况</span>
        </div>
        <div class="chart-body">
          <div class="body-left">
            <div class="item-title">收入利润完成情况</div>
            <div id="profitRealization"></div>
          </div>
          <div class="body-center">
            <div class="item-title">各类市场份额</div>
            <div id="marketShares"></div>
          </div>
          <div class="body-right">
            <div class="item-title">满意度情况</div>
            <div id="satisfaction"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { onMounted, ref, computed } from "vue";
import * as echarts from "echarts";
import { cloneDeep } from "lodash";
import {
  chartSetConfig,
  satisfactionSituation,
  marketShareByCategory,
  completionOfRevenueAndProfit,
  defaultServiceLineData,
  auditContent,
  defaultSurveyQuestionnaire,
  defaultToBeImproved,
} from "@/utils/chartSetConfig/chartSetConfig"; //图表公共配置
const NO_PERMISSIONS = "抱歉！您暂无权限查看具体明细信息！";
const NO_DATA = "审计整改系统中该项目暂无数据可查";
const loading = ref(false); //默认加载状态
const BROWSER_WIDTH = 1920; //默认浏览器宽度
const windowRatio = ref(1); //初始浏览器宽度变化比例
/**
 * 监听浏览器宽度变化来修改图表字体大小
 */
const changeWidth = () => {
  const widthDom = document.getElementById("content");
  windowRatio.value = widthDom.clientWidth / BROWSER_WIDTH;
  change();
  // 监听窗口的resize事件
  window.addEventListener("resize", () => {
    // 根据当前窗口宽度和默认窗口宽度计算出比例
    windowRatio.value = widthDom.clientWidth / BROWSER_WIDTH;
    change(); //更新渲染图表
  });
};
const { selfAdaption, tooltip, tooltips, grid, axisLabel, splitLine } = chartSetConfig; //图表公共配置
const yearList = ref([]); //年份列表
const yearValue = ref(""); //年份选择,默认第一个
const companySelection = ref([]); //公司选择列表
const companySelectionValue = ref(""); //公司选择,默认第一个
const performanceEvaluation = ref(); //经营管理绩效评价图表
const bazaar = ref(false); //市场经营悬浮框状态
const partyBuilding = ref(false); //党建引领悬浮框状态
const synthesize = ref(false); //综合管理悬浮框状态
const netConstruction = ref(false); //网建运维悬浮框状态
const governmentEnterprise = ref(false); //政企运营悬浮框状态
const tooltipTop = ref(""); //雷达图悬浮框上偏移量
const tooltipLeft = ref(""); //雷达图悬浮框左偏移量
const performanceEvaluationData = ref({}); //经营管理绩效评价数据
const newPerformanceEvaluationData = ref({}); //悬浮框经营管理绩效评价数据
/**
 * 获奖分数
 * @param value 获奖等级
 * @returns {number} 分数值
 */
const winningScore = (value) => {
  switch (value) {
    case "一等奖":
    case "三星":
    case "优秀":
      return 100;
    case "二等奖":
    case "二星":
    case "优良":
    case "良好":
      return 80;
    case "三等奖":
    case "一星":
    case "一般":
      return 60;
    default:
      return 40;
  }
};
const colors = [
  "#5470c6",
  "#91cc75",
  "#fac858",
  "#ee6666",
  "#73c0de",
  "#00FFFF",
  "#3ba272",
  "#f08e3a",
  "#e97ccb",
  "#9a60b4",
  "#108e3a",
]; //雷达图颜色
/**
 * 雷达图悬浮数据
 */
//市场经营数据
const marketOperationData = computed(() =>
  newPerformanceEvaluationData.value.situationOfEvaluation.map((item, index) => {
    return {
      name: item.name, //年份
      color: colors[index], //颜色
      ranking: item.marketManagement.ranking, //市场经营排名
      //市场经营计算规则，第一名100.第二名90。当然为空时返回0
      value: item.marketManagement.ranking === "/" ? 0 : 100 - (item.marketManagement.ranking - 1) * 10, //市场经营分数
    };
  }),
);
// 政企运营数据
const governmentEnterpriseData = computed(() =>
  newPerformanceEvaluationData.value.situationOfEvaluation.map((item, index) => {
    return {
      name: item.name, //年份
      color: colors[index], //颜色
      bearThePalm: item.governmentEnterprise.bearThePalm, //政企运营获奖情况
      value: winningScore(item.governmentEnterprise.bearThePalm), //政企运营分数
    };
  }),
);
// 网建运维数据
const networkConstructionOperationData = computed(() =>
  newPerformanceEvaluationData.value.situationOfEvaluation.map((item, index) => {
    return {
      name: item.name, //年份
      color: colors[index], //颜色
      networkManagementSituation: item.networkConstructionOperation.networkManagementSituation, //网络运维获奖情况
      engineeringManagementSituation: item.networkConstructionOperation.engineeringManagementSituation, //工程建设获奖情况
      value: (() => {
        const networkValue = winningScore(item.networkConstructionOperation.networkManagementSituation); //网络运维综合管理分数
        const engineeringValue = winningScore(item.networkConstructionOperation.engineeringManagementSituation); //工程建设管理综合考评分数
        return (networkValue + engineeringValue) / 2; //求平均值
      })(),
    };
  }),
);
// 综合管理数据
const integratedManagementData = computed(() =>
  newPerformanceEvaluationData.value.situationOfEvaluation.map((item, index) => {
    return {
      name: item.name, //年份
      color: colors[index], //颜色
      financialWorkEvaluation: item.integratedManagement.financialWorkEvaluation, //财务工作评价情况
      satisfiesafetyProductionAssessment: item.integratedManagement.satisfiesafetyProductionAssessment, //安全生产评价情况
      evaluationOfUnionBuilding: item.integratedManagement.evaluationOfUnionBuilding, //工会建家评价情况
      supplyChainPerformanceEvaluation: item.integratedManagement.supplyChainPerformanceEvaluation, //供应链绩效考核评价情况
      value: (() => {
        const financialValue = winningScore(item.integratedManagement.financialWorkEvaluation); //财务工作考评分数
        const satisfiesafetyValue = winningScore(item.integratedManagement.satisfiesafetyProductionAssessment); //安全生产责任制考核分数
        const evaluation = winningScore(item.integratedManagement.evaluationOfUnionBuilding); //工会建家考评分数
        const supplyChainValue = winningScore(item.integratedManagement.supplyChainPerformanceEvaluation); //供应链绩效考核分数
        return (financialValue + satisfiesafetyValue + evaluation + supplyChainValue) / 4; //求平均值
      })(),
    };
  }),
);
// 党建引领数据
const guidanceInPartyBuildingData = computed(() =>
  newPerformanceEvaluationData.value.situationOfEvaluation.map((item, index) => {
    return {
      name: item.name, //年份
      color: colors[index], //颜色
      partyBuildingAssessment: item.guidanceInPartyBuilding.partyBuildingAssessment, //党建工作考核评价情况
      disciplineAssessment: item.guidanceInPartyBuilding.disciplineAssessment, //纪律检查工作考核情况
      value: (() => {
        const partyValue = winningScore(item.guidanceInPartyBuilding.partyBuildingAssessment); //党建工作考核评价分数
        const disciplineValue = winningScore(item.guidanceInPartyBuilding.disciplineAssessment); //纪律检查工作考核分数
        return (partyValue + disciplineValue) / 2; //求平均值
      })(),
    };
  }),
);
/**
 * 经营管理绩效评价图表
 */
const performanceEvaluationEcharts = () => {
  //获取图表容器
  if (!performanceEvaluation.value) {
    performanceEvaluation.value = markRaw(echarts.init(document.getElementById("performanceEvaluation")));
  }
  //图表响应式变化
  selfAdaption(performanceEvaluation.value);
  const option = {
    tooltip: {
      trigger: "item",
      axisPointer: {
        type: "line",
      },
      formatter: (params) => {
        if (params.seriesType === "pie") {
          // 圆环图表
          return `<div>${params.data.name}</div>
                <div class="tooltip-custom"><span><span  class="custom-icon" style="background: ${params.color}"></span>等级</span><span>${params.data.grade}</span></div>
                <div class="tooltip-custom"><span><span  class="custom-icon" style="background: ${params.color}"></span>分数</span><span>${params.data.score}</span></div>
                <div class="tooltip-custom"><span><span  class="custom-icon" style="background: ${params.color}"></span>排名</span><span>${params.data.ranking}</span></div>`;
        }
      },
      borderColor: "transparent",
      textStyle: {
        color: "#fff", //设置文字颜色
      },
      backgroundColor: "#05164d",
    },
    legend: {
      orient: "vertical",
      right: "10",
      bottom: "10",
      data: performanceEvaluationData.value.feedbackOnPerformance.map((item, index) => {
        return {
          name: item.name,
          textStyle: {
            color: "#fff",
          },
          itemStyle: { color: colors[index] },
        };
      }),
    },
    radar: {
      radius: "45%",
      center: ["40%", "50%"], //位置修改
      name: {
        textStyle: {
          color: "#fff",
          fontSize: 16,
          borderRadius: 3,
          padding: [-10, -2],
        },
        formatter: (value) => {
          // 将四字字拆分成两行并添加空行
          const list = value.split("");
          list.splice(2, 0, "\n");
          return list.join("");
        },
      },
      indicator: [
        { name: "市场经营", max: 100 },
        { name: "政企运营", max: 100 },
        { name: "网建运维", max: 100 },
        { name: "综合管理", max: 100 },
        { name: "党建引领", max: 100 },
      ],
      tooltip: {
        show: false, // 禁用 radar 系列的 tooltip
      },
      triggerEvent: true,
      axisLine: {
        show: false, //辐射线
      },
      splitLine: {
        lineStyle: {
          color: "#799CB3", //刻度线颜色
        },
      },
      splitArea: {
        //背景颜色
        areaStyle: {
          color: "none",
        },
      },
    },
    series: [
      {
        type: "radar",
        symbol: "none",
        data: performanceEvaluationData.value.situationOfEvaluation.map((item, index) => {
          return {
            value: [
              marketOperationData.value[index].value, //市场经营
              governmentEnterpriseData.value[index].value, //政企运营
              networkConstructionOperationData.value[index].value, //网络运维
              integratedManagementData.value[index].value, //综合管理
              guidanceInPartyBuildingData.value[index].value, //党建引领
            ], //分数计算规则
            name: item.name,
            lineStyle: {
              color: colors[index],
            },
            areaStyle: {
              color: `${colors[index]}33`,
            },
          };
        }),
      },
      {
        type: "pie",
        radius: ["85%", "77%"], //修改大小
        center: ["40%", "50%"], //位置修改
        labelLine: {
          length: 10,
        },
        label: {
          show: false, //隐藏标签
        },
        data: performanceEvaluationData.value.feedbackOnPerformance.map((item, index) => {
          return {
            ...item,
            value: 1, //分数默认1
            itemStyle: { color: colors[index] },
          };
        }),
      },
    ],
  };
  option && performanceEvaluation.value.setOption(option);
  /**
   * 根据图列的选择显示对应年份悬浮窗数据
   */
  performanceEvaluation.value.on("legendselectchanged", (params) => {
    newPerformanceEvaluationData.value.situationOfEvaluation = performanceEvaluationData.value.situationOfEvaluation.filter(
      (item) => {
        return params.selected[item.name];
      },
    );
  });
  /**
   * 显示tooltip
   * @param name 需要显示悬浮窗的文字
   * @param isShow 是否显示
   */
  const showTooltip = (name, isShow) => {
    const newName = name.split("\n").join(""); //删除换行符，因为拿到的字符串是四个字。且一行两字的加换行。所以删除换行符变成四字。
    switch (newName) {
      case "市场经营":
        bazaar.value = isShow;
        break;
      case "政企运营":
        governmentEnterprise.value = isShow;
        break;
      case "网建运维":
        netConstruction.value = isShow;
        break;
      case "综合管理":
        synthesize.value = isShow;
        break;
      case "党建引领":
        partyBuilding.value = isShow;
        break;
    }
  };
  performanceEvaluation.value.on("mouseover", ({ name, event, componentType }) => {
    // 如果组件类型不是雷达，直接返回
    if (componentType !== "radar") {
      return;
    }
    const OFFSET = 15; // 定义偏移量
    // 根据事件的offsetY和offsetX计算工具提示的位置
    tooltipTop.value = `${event.offsetY + OFFSET}px`; //修改悬浮框上偏移量15px，使其不能遮住文本
    tooltipLeft.value = `${event.offsetX + OFFSET}px`; //修改悬浮框左偏移量15px，使其不能遮住文本
    // 显示悬浮窗
    showTooltip(name, true);
  });
  performanceEvaluation.value.on("mouseout", ({ name, event, componentType }) => {
    // 如果组件类型不是雷达，直接返回
    if (componentType !== "radar") {
      return;
    }
    // 隐藏悬浮窗
    showTooltip(name, false);
  });
};
const scoreResult = ref(); //调查问卷项得分结果图表
const scoreResultData = ref([]); //调查问卷项得分结果数据
/**
 * 调查问卷项得分结果图表
 */
const scoreResultEcharts = () => {
  //获取图表容器
  if (!scoreResult.value) {
    scoreResult.value = markRaw(echarts.init(document.getElementById("scoreResult")));
  }
  //图表响应式变化
  selfAdaption(scoreResult.value);
  const option = {
    tooltip,
    grid: {
      //位置修改
      left: "3%",
      right: "3%",
      bottom: "10%",
      top: "10%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      data: scoreResultData.value?.map((item) => item.name),
      axisLabel: {
        //刻度文本
        show: true,
        textStyle: {
          color: "#fff",
        },
        formatter: function (value) {
          //x轴的文字改为竖版显示
          const str = value.split("");
          return str.join("\n");
        },
      },
    },
    yAxis: {
      type: "value",
      axisLabel: axisLabel(),
      splitLine,
    },
    series: [
      {
        type: "bar",
        barWidth: "20%", //柱形图宽度
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                //代表渐变色从正上方开始
                offset: 0, //offset范围是0~1，用于表示位置，0是指0%处的颜色
                color: "#27D6D6",
              }, //柱图渐变色
              {
                offset: 1, //指100%处的颜色
                color: "#319AE0",
              },
            ]),
          },
        },
        data: scoreResultData.value,
      },
    ],
  };
  option && scoreResult.value.setOption(option);
};
const roomForImprovement = ref(); //有待提升的方面图表
const roomForImprovementData = ref([]); //有待提升的方面数据
/**
 * 有待提升的方面
 */
const roomForImprovementEcharts = () => {
  //获取图表容器
  if (!roomForImprovement.value) {
    roomForImprovement.value = markRaw(echarts.init(document.getElementById("roomForImprovement")));
  }
  //图表响应式变化
  selfAdaption(roomForImprovement.value);
  const option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "line",
      },
      borderColor: "transparent",
      textStyle: {
        color: "#fff", //设置文字颜色
      },
      backgroundColor: "#05164d",
      // 此函数用于格式化图表中的标签
      formatter: function (val) {
        // 初始化返回的字符串，添加第一个标签的名称
        let string = val[0].name + "<br>";
        // 遍历标签数组，为每个标签生成对应的 HTML 字符串
        val.forEach((v) => {
          // 为每个标签生成包含标记、轴值和实际值的 flex 容器，并添加到字符串中
          string += `<div style='display: flex;align-items: center;justify-content: space-between;'><span>${v.marker}${v.axisValue}</span>&nbsp; &nbsp; <span style='font-weight: 700;'>${v.value}%</span></div>`;
        });
        // 返回构建好的 HTML 字符串
        return string;
      },
    },
    grid: {
      //位置修改
      left: "3%",
      right: "3%",
      bottom: "10%",
      top: "10%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      data: roomForImprovementData.value?.map((item) => item.name),
      axisLabel: {
        interval: 0, //强制显示所有标签
        //刻度文本
        show: true,
        textStyle: {
          color: "#fff",
        },
        formatter: function (value) {
          //x轴的文字改为超过4字换行显示
          const str = value.split("");
          str.splice(4, 0, "\n");
          return str.join("");
        },
      },
    },
    yAxis: {
      type: "value",
      axisLabel: axisLabel("{value}%"),
      splitLine,
    },
    series: [
      {
        barWidth: "70%", //柱形图宽度
        type: "pictorialBar", // 象形柱图
        symbol: "triangle", // 图形类型
        itemStyle: {
          normal: {
            barBorderRadius: [10], //柱体圆角
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                //代表渐变色从正上方开始
                offset: 0, //offset范围是0~1，用于表示位置，0是指0%处的颜色
                color: "#27D6D6",
              }, //柱图渐变色
              {
                offset: 1, //指100%处的颜色
                color: "#319AE0",
              },
            ]),
          },
        },
        data: roomForImprovementData.value?.map((item) => {
          return item.value.toFixed(2);
        }),
      },
    ],
  };
  option && roomForImprovement.value.setOption(option);
};
const problemProfile = ref(); //七大审计内容图表
const problemProfileValue = ref([]); //七大审计内容数据
const lastExecutionTime = ref(0); //节流时间
/**
 * 节流
 * @param data 数据
 * @param componentSubType 点击事件类型
 * @param delay 节流时间
 */
const throttle = (data, componentSubType, delay = 500) => {
  if (componentSubType !== "bar") {
    return;
  }
  const now = Date.now();
  if (now - lastExecutionTime.value >= delay) {
    lastExecutionTime.value = now;
    cellClickEvent({ row: data });
  }
};
/**
 * 七大审计内容
 */
const problemProfileEcharts = () => {
  //获取图表容器
  if (!problemProfile.value) {
    problemProfile.value = markRaw(echarts.init(document.getElementById("problemProfile")));
  }
  //图表响应式变化
  selfAdaption(problemProfile.value);
  const option = {
    tooltip,
    legend: {
      //示例
      data: ["问题数量", "问题金额"],
      textStyle: {
        fontSize: 11,
        color: "#fff",
      },
      bottom: "2%",
    },
    grid: {
      //位置修改
      left: "3%",
      right: "3%",
      bottom: "10%",
      top: "20%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      data: problemProfileValue.value?.map((item) => item.name),
      axisLabel: {
        interval: 0, //强制显示所有标签
        //刻度文本
        show: true,
        textStyle: {
          color: "#fff",
        },
        formatter: function (value) {
          //x轴的文字改为超过4字换行显示
          const str = value.split("");
          str.splice(4, 0, "\n");
          return str.join("");
        },
      },
    },
    yAxis: [
      {
        name: "金额",
        nameTextStyle: {
          color: "#fff",
          fontSize: 12,
        },
        type: "value",
        axisLabel: axisLabel(),
        splitLine,
      },
      {
        name: "数量",
        nameTextStyle: {
          color: "#fff",
          fontSize: 12,
        },
        type: "value",
        axisLabel: axisLabel(),
        splitLine: {
          //刻度线
          show: false,
        },
      },
    ],
    series: [
      {
        name: "问题数量",
        barWidth: "30%", //柱形图宽度
        yAxisIndex: 1,
        itemStyle: {
          normal: {
            barBorderRadius: [10], //柱体圆角
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                //代表渐变色从正上方开始
                offset: 0, //offset范围是0~1，用于表示位置，0是指0%处的颜色
                color: "#439AFF",
              }, //柱图渐变色
              {
                offset: 1, //指100%处的颜色
                color: "#26D2D2",
              },
            ]),
          },
        },
        data: problemProfileValue.value?.map(({ quantity, url, auditAuth }) => {
          return {
            value: quantity,
            url,
            auditAuth,
          };
        }),
        type: "bar",
      },
      {
        name: "问题金额",
        type: "line",
        itemStyle: {
          normal: {
            color: "#E0A136",
          },
        },
        data: problemProfileValue.value?.map((item) => item.money),
      },
    ],
  };
  option && problemProfile.value.setOption(option);
  problemProfile.value.on("click", function ({ data, componentSubType }) {
    throttle(data, componentSubType);
  });
};
const serviceLine = ref(); //业务条线图表
const serviceLineValue = ref({}); //业务条线数据
/**
 * 业务条线
 */
const serviceLineEcharts = () => {
  //获取图表容器
  if (!serviceLine.value) {
    serviceLine.value = markRaw(echarts.init(document.getElementById("serviceLine")));
  }
  //图表响应式变化
  selfAdaption(serviceLine.value);
  const option = {
    tooltip,
    grid: {
      //位置修改
      left: "3%",
      right: "3%",
      bottom: "10%",
      top: "20%",
      containLabel: true,
    },
    legend: {
      //示例
      data: ["问题数量", "问题金额"],
      textStyle: {
        fontSize: 11,
        color: "#fff",
      },
      bottom: "2%",
    },
    xAxis: {
      type: "category",
      data: serviceLineValue.value?.map((item) => item.name),
      axisLabel: axisLabel(),
    },
    yAxis: [
      {
        type: "value",
        name: "金额",
        nameTextStyle: {
          color: "#fff",
          fontSize: 12,
        },
        axisLabel: axisLabel(),
        splitLine,
      },
      {
        type: "value",
        name: "数量",
        nameTextStyle: {
          color: "#fff",
          fontSize: 12,
        },
        axisLabel: axisLabel(),
        splitLine: {
          //刻度线
          show: false,
        },
      },
    ],
    series: [
      {
        type: "line",
        name: "问题金额",
        smooth: true, //平滑曲线
        symbol: "circle",
        itemStyle: {
          color: "#E0A136",
          borderColor: "#E0A136",
          borderWidth: 2,
          borderType: "solid",
        },
        lineStyle: {
          color: "rgba(224,161,54,1)",
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              //代表渐变色从正上方开始
              offset: 0, //offset范围是0~1，用于表示位置，0是指0%处的颜色
              color: "#E0A136",
            }, //柱图渐变色
            {
              //代表渐变色从正上方开始
              offset: 0.5, //offset范围是0~1，用于表示位置，0是指0%处的颜色
              color: "#E0A136",
            }, //柱图渐变色
            {
              offset: 1, //指100%处的颜色
              color: "rgba(224,161,54,0)",
            },
          ]),
        },
        data: serviceLineValue.value?.map((item) => item.money),
      },
      {
        yAxisIndex: 1,
        type: "bar",
        name: "问题数量",
        barWidth: "30%", //柱形图宽度
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                //代表渐变色从正上方开始
                offset: 0, //offset范围是0~1，用于表示位置，0是指0%处的颜色
                color: "#439AFF",
              }, //柱图渐变色
              {
                offset: 1, //指100%处的颜色
                color: "#26D2D2",
              },
            ]),
          },
        },
        data: serviceLineValue.value?.map(({ quantity, url, auditAuth }) => {
          return {
            value: quantity,
            url,
            auditAuth,
          };
        }),
      },
    ],
  };
  option && serviceLine.value.setOption(option);
  serviceLine.value.on("click", function ({ data, componentSubType }) {
    throttle(data, componentSubType);
  });
};
const profitRealization = ref(); //收入利润完成情况图表
const profitRealizationValue = ref({}); //收入利润完成情况数据
/**
 * 收入利润完成情况
 */
const profitRealizationEcharts = () => {
  //获取图表容器
  if (!profitRealization.value) {
    profitRealization.value = markRaw(echarts.init(document.getElementById("profitRealization")));
  }
  //图表响应式变化
  selfAdaption(profitRealization.value);
  const option = {
    grid,
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "line",
      },
      borderColor: "transparent",
      textStyle: {
        color: "#fff", //设置文字颜色
      },
      backgroundColor: "#05164d",
      // 此函数用于格式化图表中的标签
      formatter: function (val) {
        // 初始化返回的字符串，添加第一个标签的名称
        let string = val[0].name + "<br>";
        // 遍历标签数组，为每个标签生成对应的 HTML 字符串
        val.forEach((v) => {
          // 为每个标签生成包含标记、轴值和实际值的 flex 容器，并添加到字符串中
          string += `<div style='display: flex;align-items: center;justify-content: space-between;'><span>${v.marker}${v.seriesName}</span>&nbsp; &nbsp; <span style='font-weight: 700;'>${v.value || 0}${v.seriesName === "收入" || v.seriesName === "利润总额" ? "" : "%"}</span></div>`;
        });
        // 返回构建好的 HTML 字符串
        return string;
      },
    },
    legend: {
      //示例
      data: ["收入", "利润总额", "收入利润率", "人均劳动生产率", "人均劳动利润率"],
      bottom: "2%",
      textStyle: {
        fontSize: 12 * windowRatio.value, //根据浏览器比例自适应
        color: "#fff",
      },
      itemWidth: 12 * windowRatio.value, //根据浏览器比例自适应
      itemHeight: 8 * windowRatio.value, //根据浏览器比例自适应
    },
    xAxis: {
      type: "category",
      data: profitRealizationValue.value?.map((item) => item.name),
      axisLabel: axisLabel(),
    },
    yAxis: [
      {
        type: "value",
        axisLabel: axisLabel(),
        splitLine,
      },
      {
        type: "value",
        axisLabel: axisLabel("{value}%"),
        splitLine: {
          //刻度线
          show: false,
        },
      },
    ],
    series: [
      {
        barGap: 0.1, //不同系列的柱间距离
        type: "bar",
        barWidth: "30%", //柱形图宽度
        name: "收入",
        animationDuration: 1400,
        animationEasingUpdate: "linear",
        showBackground: true, //柱状图背景开启
        backgroundStyle: {
          //柱状图背景颜色
          color: "rgba(23,126,230,0.1)",
        },
        itemStyle: {
          normal: {
            barBorderRadius: [10, 10, 0, 0], //柱体圆角
            color: "#329ae1",
          },
        },
        data: profitRealizationValue.value?.map((item) => item.income),
      },
      {
        type: "bar",
        barWidth: "30%", //柱形图宽度
        name: "利润总额",
        showBackground: true, //柱状图背景开启
        animationDuration: 1400,
        animationEasingUpdate: "linear",
        backgroundStyle: {
          //柱状图背景颜色
          color: "rgba(23,126,230,0.1)",
        },
        itemStyle: {
          normal: {
            barBorderRadius: [10, 10, 0, 0], //柱体圆角
            color: "#aa87fd",
          },
        },
        data: profitRealizationValue.value?.map((item) => item.totalProfit),
      },
      {
        data: twoDecimalPlaces(profitRealizationValue.value, "profitToRevenueRatio"),
        type: "line",
        name: "收入利润率",
        smooth: true,
        yAxisIndex: 1,
        z: 4,
        itemStyle: {
          normal: {
            color: "#D6AC27",
          },
        },
        lineStyle: {
          width: 2, // 设置线条宽度
        },
      },
      {
        data: twoDecimalPlaces(profitRealizationValue.value, "productivityPerWorker"),
        type: "line",
        name: "人均劳动生产率",
        smooth: true,
        yAxisIndex: 1,
        z: 5,
        itemStyle: {
          normal: {
            color: "#E04B31",
          },
        },
        lineStyle: {
          width: 2, // 设置线条宽度
        },
      },
      {
        data: twoDecimalPlaces(profitRealizationValue.value, "profitRatePerCapitaOnLabor"),
        type: "line",
        name: "人均劳动利润率",
        smooth: true,
        yAxisIndex: 1,
        z: 11,
        itemStyle: {
          normal: {
            color: "#D6279F",
          },
        },
        lineStyle: {
          width: 2, // 设置线条宽度
        },
      },
    ],
  };
  option && profitRealization.value.setOption(option);
};
const marketShares = ref(); //各类市场份额图表
const marketSharesValue = ref(); //各类市场份额数据
/**
 * 各类市场份额
 */
const marketSharesEcharts = () => {
  //获取图表容器
  if (!marketShares.value) {
    marketShares.value = markRaw(echarts.init(document.getElementById("marketShares")));
  }
  //图表响应式变化
  selfAdaption(marketShares.value);
  const option = {
    grid: {
      //位置修改
      left: "3%",
      right: "3%",
      bottom: "14%",
      top: "15%",
      containLabel: true,
    },
    tooltip: tooltips,
    legend: {
      //示例
      data: [
        "5G用户市场份额",
        "手机上网流量市场份额",
        "家宽客户市场份额",
        "千兆用户市场份额",
        "通信用户市场份额",
        "政企市场收入市场份额",
        "收入市场份额",
      ],
      bottom: "2%",
      textStyle: {
        fontSize: 11 * windowRatio.value, //根据浏览器比例自适应
        color: "#fff",
      },
      itemWidth: 12 * windowRatio.value, //根据浏览器比例自适应
      itemHeight: 8 * windowRatio.value, //根据浏览器比例自适应
    },
    xAxis: {
      type: "category",
      data: marketSharesValue.value?.map((item) => item.name),
      axisLabel: axisLabel(),
    },
    yAxis: {
      type: "value",
      max: 100,
      min: 0,
      axisLabel: axisLabel("{value}%"),
      splitLine,
    },
    series: [
      {
        data: twoDecimalPlaces(marketSharesValue.value, "user"),
        type: "line",
        name: "5G用户市场份额",
        smooth: true,
        itemStyle: {
          normal: {
            color: "#319AE0",
          },
        },
        lineStyle: {
          width: 2, // 设置线条宽度
        },
      },
      {
        data: twoDecimalPlaces(marketSharesValue.value, "gprs"),
        type: "line",
        name: "手机上网流量市场份额",
        smooth: true,
        itemStyle: {
          normal: {
            color: "#27D6D6",
          },
        },
        lineStyle: {
          width: 2, // 设置线条宽度
        },
      },
      {
        data: twoDecimalPlaces(marketSharesValue.value, "homeWideClient"),
        type: "line",
        name: "家宽客户市场份额",
        smooth: true,
        itemStyle: {
          normal: {
            color: "#D6AC27",
          },
        },
        lineStyle: {
          width: 2, // 设置线条宽度
        },
      },
      {
        data: twoDecimalPlaces(marketSharesValue.value, "gigabitSubscriber"),
        type: "line",
        name: "千兆用户市场份额",
        smooth: true,
        itemStyle: {
          normal: {
            color: "#E04B31",
          },
        },
        lineStyle: {
          width: 2, // 设置线条宽度
        },
      },
      {
        data: twoDecimalPlaces(marketSharesValue.value, "communicationUser"),
        type: "line",
        name: "通信用户市场份额",
        smooth: true,
        itemStyle: {
          normal: {
            color: "#84D627",
          },
        },
        lineStyle: {
          width: 2, // 设置线条宽度
        },
      },
      {
        data: twoDecimalPlaces(marketSharesValue.value, "governmentAndEnterpriseMarketIncome"),
        type: "line",
        name: "政企市场收入市场份额",
        smooth: true,
        itemStyle: {
          normal: {
            color: "#2747D6",
          },
        },
        lineStyle: {
          width: 2, // 设置线条宽度
        },
      },
      {
        data: twoDecimalPlaces(marketSharesValue.value, "income"),
        type: "line",
        name: "收入市场份额",
        smooth: true,
        itemStyle: {
          normal: {
            color: "#D6279F",
          },
        },
        lineStyle: {
          width: 2, // 设置线条宽度
        },
      },
    ],
  };
  option && marketShares.value.setOption(option);
};
const satisfaction = ref(); //满意度情况图表
const satisfactionValue = ref({}); //满意度情况数据
/**
 * 满意度情况
 */
const satisfactionEcharts = () => {
  //获取图表容器
  if (!satisfaction.value) {
    satisfaction.value = markRaw(echarts.init(document.getElementById("satisfaction")));
  }
  //图表响应式变化
  selfAdaption(satisfaction.value);
  const option = {
    tooltip: tooltips,
    grid,
    legend: {
      //示例
      data: ["客户满意度", "员工满意度"],
      textStyle: {
        fontSize: 11,
        color: "#fff",
      },
      bottom: "2%",
    },
    xAxis: {
      type: "category",
      data: satisfactionValue.value?.map((item) => item.name),
      axisLabel: axisLabel(),
    },
    yAxis: {
      max: 100,
      min: 0,
      axisLabel: axisLabel("{value}%"),
      splitLine,
    },
    series: [
      {
        data: twoDecimalPlaces(satisfactionValue.value, "staff"),
        type: "line",
        symbol: "none",
        name: "员工满意度",
        smooth: true,
        itemStyle: {
          normal: {
            color: "#E0A136",
          },
        },
      },
      {
        data: twoDecimalPlaces(satisfactionValue.value, "client"),
        type: "line",
        symbol: "none",
        name: "客户满意度",
        smooth: true,
        itemStyle: {
          normal: {
            color: "#319AE0",
          },
        },
      },
    ],
  };
  option && satisfaction.value.setOption(option);
};
/**
 * 重新渲染图表
 */
const change = () => {
  loading.value = false;
  performanceEvaluationEcharts(); //经营管理绩效评价
  scoreResultEcharts();
  roomForImprovementEcharts();
  problemProfileEcharts(); //七大审计内容
  serviceLineEcharts(); //业务条线
  profitRealizationEcharts(); //收入利润完成情况
  marketSharesEcharts(); //各类市场份额
  satisfactionEcharts(); //满意度情况
};
/**
 * 年份下拉选项
 */
const yearChange = async () => {
  await benefitOverviewApi();
};

const benefitOverview = ref({}); //审计成果及整改效益总览
const tableData = ref([]); //审计成果及整改效益系统
/**
 * 点击表格事件
 */
const cellClickEvent = ({ row, columnIndex = 0 }) => {
  if (columnIndex !== 0) {
    //当点击的不是第一列时，不执行点击事件
    return;
  }
  // 权限校验
  if (!row.auditAuth) {
    ElMessage.error(NO_PERMISSIONS);
    return;
  }
  // URL为空，提示信息
  if (row.url === "") {
    ElMessage.error(NO_DATA);
    return;
  }
  window.open(row.url, "_blank");
};
import {
  getAuditYearApi,
  getManagementPerformanceApi,
  getRectificationApi,
  getQuestionnaireApi,
  getAuditContentApi,
  getServiceLineApi,
  getRevenueProfiApi,
  getMarketShareApi,
  getSatisfactionApi,
} from "@/api/byTheBigScreen";
import { ElMessage } from "element-plus";
/**
 * 年份列表
 * @returns {Promise<void>}
 */
const getAuditYearFn = async () => {
  const auditYearData = await getAuditYearApi(); //必须先请求最近几年的年份列表
  yearList.value = auditYearData.data; //年份列表
  yearValue.value = yearList.value[0]; //默认选择一个年份
};
/**
 * 项目名称下拉选项
 */
const projectNameChange = async () => {
  loading.value = true;
  // 根据提供的公司选择值，在公司选择列表中查找匹配的项目
  const data = companySelection.value.find((item) => item.name === companySelectionValue.value);
  const params = {
    year: yearValue.value,
    projectName: data.name,
    projectId: data?.value,
  };
  await auditEvaluationPresentationApi(params);
};
/**
 * 审计成果及整改效益总览
 * @returns {Promise<void>}
 */
const benefitOverviewApi = async () => {
  const rectificationData = await getRectificationApi({
    year: yearValue.value,
  });
  benefitOverview.value = rectificationData.data.rectificationBenefit; //审计成果及整改效益总览
  tableData.value = rectificationData.data.rectificationForm; //审计成果及整改效益系统
  companySelection.value = rectificationData.data.projects; //项目名称下拉选项
  companySelectionValue.value = companySelection.value[0].name; //默认选择第一个公司列表
  await projectNameChange(); //审计评价展示图表集合
};
/**
 * 根据接口返回数据为空填充默认数据
 */
const defaultData = (data, mockData) => {
  if (Array.isArray(mockData)) {
    return (data?.data?.length ?? 0) > 0 ? data.data : mockData;
  } else {
    return (data?.data?.length ?? 0) > 0 ? data.data : mockData(yearList.value);
  }
};
/**
 * 审计评价展示图表集合
 * @returns {Promise<void>}
 */
const auditEvaluationPresentationApi = async (value) => {
  // 并发获取多个图表的数据
  try {
    const [
      managementPerformanceData,
      surveyQuestionnaireData,
      auditContentData,
      serviceLineData,
      revenueProfiData,
      marketShareData,
      satisfactionData,
    ] = await Promise.all([
      getManagementPerformanceApi(value),
      getQuestionnaireApi(value),
      getAuditContentApi(value),
      getServiceLineApi(value),
      getRevenueProfiApi(value),
      getMarketShareApi(value),
      getSatisfactionApi(value),
    ]);
    performanceEvaluationData.value = managementPerformanceData.data; //经营管理绩效评价
    newPerformanceEvaluationData.value = cloneDeep(performanceEvaluationData.value);
    scoreResultData.value = surveyQuestionnaireData.data.hasOwnProperty("surveyQuestionnaire")
      ? surveyQuestionnaireData.data.surveyQuestionnaire
      : defaultSurveyQuestionnaire; //调查问卷项得分结果
    roomForImprovementData.value = surveyQuestionnaireData.data?.toBeImproved
      ? surveyQuestionnaireData.data.toBeImproved
      : defaultToBeImproved; //有待提升的方面
    problemProfileValue.value = defaultData(auditContentData, auditContent); // 七大审计内容
    serviceLineValue.value = defaultData(serviceLineData, defaultServiceLineData); // 业务条线
    profitRealizationValue.value = defaultData(revenueProfiData, completionOfRevenueAndProfit); // 收入利润完成情况
    marketSharesValue.value = defaultData(marketShareData, marketShareByCategory); // 各类市场份额
    satisfactionValue.value = defaultData(satisfactionData, satisfactionSituation); // 满意度情况
  } catch (e) {
    throw new Error(e);
  } finally {
    change();
  }
};
/**
 * 保留两位小数
 */
const twoDecimalPlaces = (data, value) => {
  return data?.map((item) => Number(item[value].replace("%", "")).toFixed(2));
};
onMounted(async () => {
  await getAuditYearFn(); //必须先请求最近几年的年份列表，再用默认第一个年份请求数据
  await benefitOverviewApi(); //审计成果及整改效益总览
  changeWidth();
});
defineExpose({
  yearValue,
  benefitOverviewApi,
}); //将年份暴露给父组件
</script>

<style scoped lang="less">
@import "@/assets/styles/byTheBigScreen/index.less";
:deep(.tooltip-custom) {
  width: 100px;
  display: flex;
  justify-content: space-between;
  .custom-icon {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 5px;
  }
}
</style>
